<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="xdz" uri="/xdztools" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>后台管理系统</title>
    
    <link href="${xdz:domain() }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${xdz:domain() }/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <link href="${xdz:domain() }/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    	if(top != window) {
    		top.location.href = window.location.href;
    	}
    </script>
    
<style type="text/css">

body{
	background-color: #222;
}

.login-box {
	width: 100%;
	max-width:500px;
	position: absolute;
 	top: 30%; 
}
@media screen and (min-width:500px){
	.login-box {
		left: 50%;
		/*设置负值，为要定位子盒子的一半宽度*/
		margin-left: -250px;
		border:5px solid rgba(246, 237, 237, 0.6);
	}
}	

.form {
	width: 100%;
	max-width:500px;
	height: 275px;
	margin: 25px auto 0px auto;
	padding-top: 25px;
}	
.login-content {
	height: 300px;
	width: 100%;
	max-width:500px;
 	background-color:#696969;  
	float: left;
}		
	
	
.input-group {
	margin: 0px 0px 30px 0px !important;
}
.form-control,
.input-group {
	height: 40px;
}

.form-group {
	margin-bottom: 0px !important;
}
.login-title {
	padding: 20px 10px;
	background-color: #333;
}
.login-title h1 {
	margin-top: 10px !important;
}
.login-title small {
	color: #fff;
}

.link p {
	line-height: 20px;
	margin-top: 30px;
}
.btn-sm {
	padding: 8px 24px !important;
	font-size: 16px !important;
}
</style>
    
    
</head>
<body>

	 <!-- Navigation -->
        <nav id="topbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="${xdz:domain() }">htzos-LOGO</a>
            </div>
        </nav>
   
    
<!--     <div class="box"> -->
		<div class="login-box">
			<div class="login-title text-center">
				<h1><small>登录</small></h1>
			</div>
			<div class="login-content ">
			<div class="form">
			<form action="${xdz:domain() }/doLogin" method="post"  onsubmit="checkForm()">
				<input type="hidden" name="fromurl" value="${fromurl }"> 
	            <input type="hidden"  name="passwordEncrypt" id="passwordEncrypt">
<%-- 	        	<label class="control-label text-danger" style="margin:30px auto auto 80px;">${loginMessage }</label> --%>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="fa fa-user"></span></span>
							<input type="text" id="userName" name="userName" class="form-control" required="required" placeholder="用户名">
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="fa fa-key"></span></span>
							<input type="password" id="password" name="password" class="form-control" required="required" placeholder="密码">
						</div>
					</div>
				</div>
				<div class="form-group form-actions">
					<div class="col-xs-4 col-xs-offset-4 ">
						<button type="submit" class="btn btn-sm btn-info"><span class="fa fa-angellist"></span>  登录</button>
					</div>
				</div>
			</form>
			</div>
		</div>
	</div>
<!-- </div> -->
    
    
    
    <script type="text/javascript" src="${xdz:domain() }/js/jquery.min.js"></script>
	<script src="${xdz:domain() }/js/jquery.md5.js"></script>
	<script src="${xdz:domain() }/js/plugins/layer/layer.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		if('${loginMessage }'!=null&&'${loginMessage }'!=""){
			layer.alert('${loginMessage }');
		}	
	
		$(".box").height($(window).height()-$("#topbar").height()-110);
		$(".login-box").height($(".box").height());
		$(".checkbox-box").on("click",function  () {
			if($(this).find(".checkbox").hasClass("checked")){
				$(this).find(".checkbox").removeClass("checked");
			}
			else{
				$(this).find(".checkbox").addClass("checked");
			}
		})
				
		function checkForm(){
	    	 $("#passwordEncrypt").val(hex_md5($("#password").val()));
		}
	
	</script>
</body>
</html>